<template>
  <div class="position-container">
    <div class="title">地域位置</div>
    <div id="map-container" style="width: 350px; height: 470px"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props:['config'],
  async mounted() {
    var myCharts = this.$echarts.init(document.getElementById('map-container'))
    const data = await axios('/json/china.json')
    this.$echarts.registerMap('china', data.data)
    console.log(data);
    var option = {
      geo: {
        type: 'map',
        map: 'china',
        roam: false,
        left: '-4%',
        zoom: 1,
        center: [87.617733, 43.792818],
        blur: {
          itemStyle: {
            color: '#f2bae8'
          },
          label: {
            show: false
          }
        }
      },
      tooltip: {
        formatter: (v) => {
          console.log(v);
          return `${ v.name } ${ v.value | 0 }`
        }
      },
      series: [{
        data: [{ name: '陕西', value: 4 }, { name: '河南', value: 78 }],
        geoIndex: 0,
        type: 'map'
      }],
      visualMap: {
        inRange: {
          color: ['#0c7bb3', '#f2bae8'] // 控制颜色渐变的范围
        }
      }
    }
    myCharts.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.position-container {
  width: 100%;
  height: 100%;
  .title {
    color: #333333;
    font-weight: normal;
    font-size: 14px;
  }
}
</style>